<title></title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<style type="text/css">  
    body{  
        background:#fbfbfb;  
    }  
    #dp-lock-wapp{  
        height:29px;position:relative;text-align:left;background:#fff;padding:3px;border:1px solid #ccc;  
    }  
    #dp-lock-btn{  
        background-attachment:fixed;  
        display:inline-block;height:29px;width:40px;border-left:1px solid #ccc;cursor:pointer;background:url(img/arr-btn.png) -42px 0px no-repeat;  
    }  
    #dp-lock-btn:hover{  
        background-position-y:-48px;  
    }  
</style>  
<script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">  
    $(function(){  
        var fin = false; // 解锁完成判断  
        var i_x = 0;  // 初始鼠标x坐标  
        var max = $("#dp-lock-wapp").width() - $("#dp-lock-btn").width();  
        // 滑动解锁脚本  
        $("#dp-lock-btn").mousedown(function(){  
            if(!fin) listen = true; // 如果解锁未完成 监听鼠标  
            document.onmousemove = function(e){  
                if(listen){  
                    var x = getMouseX(e);  
                    if(i_x == 0) i_x = x; // 初始化x坐标  
                    var ml = x - i_x; // 移动距离  
                    ml = ml > 0 ? ml > max ? max : ml : 0; // 距离判断  
                    $("#dp-lock-btn").css("margin-left",ml + "px");  
                      
                    // ML == ,ax 时完成解锁  
                    if(ml == max) {  
                        fin = true;  
                        listen = false;  
                        // 解锁完毕
                        $("#dp-lock").html("解锁成功");
                    }  
                }  
            }  
            $(document).mouseup(function(){  
                listen = false;  
            });  
        });  
        function getMouseX(ev){  
            ev=ev || window.event;  
            if(ev.pageX){  
                return ev.pageX;  
            }  
            return ev.clientX + document.body.scrollLeft - document.body.clientLeft;
        }  
    });  
</script>  
  
  
<div id="dp-lock" style="width:300px;margin:300px auto;">  
    <div id="dp-lock-wapp">  
        <a id="dp-lock-btn"></a>  
    </div>  
</div>